<template>
    <div>
        <Alert>
            <Form :model="searchObj" inline>
                <FormItem>
                    <Input v-model="searchObj.name" class="search-input" clearable placeholder="请输入姓名"/>
                </FormItem>
                <FormItem>
                    <Input v-model="searchObj.card_no" class="search-input" clearable placeholder="请输入身份证号"/>
                </FormItem>
                <FormItem>
                    <Input v-model="searchObj.tel" class="search-input" clearable placeholder="请输入手机号"/>
                </FormItem>
                <FormItem>
                    <Button class="search-btn" type="primary" @click="searchAction">
                        <Icon type="ios-search"/>
                        搜索
                    </Button>
                </FormItem>
            </Form>
        </Alert>
        <Row>
            <vxe-toolbar export custom></vxe-toolbar>
            <vxe-table
                    border
                    resizable
                    export-config
                    highlight-hover-row
                    height="500"
                    size="medium"
                    show-overflow="tooltip"
                    :loading="tableLoading"
                    align="center"
                    header-align="center"
                    :sort-config="{trigger: 'cell'}"
                    :data="tableData"
                    :checkbox-config="{checkField: 'checked'}">
                <vxe-table-column type="seq" title="序号" width="60"></vxe-table-column>
                <vxe-table-column :field="item.key" :title="item.title" min-width="120"
                                  v-for="(item,index) in tableColumns" :key="index">
                </vxe-table-column>
                <vxe-table-column field="action" title="操作">
                    <template v-slot="{row}">
                        <ButtonGroup>
                            <!--<Button type="primary" size="small" class="action-btn"
                                    @click="editAction(row)">编辑修改
                            </Button>-->
                            <Button type="info" size="small" class="action-btn"
                                    @click="info(row)">查看
                            </Button>
                        </ButtonGroup>
                    </template>
                </vxe-table-column>
            </vxe-table>
        </Row>
        <Row type="flex" justify="end">
            <Page show-sizer show-total :current="pageObj.pageNo" :page-size="pageObj.pageSize" :total="pageObj.totalRecord"
                  @on-change="getPageNo" :page-size-opts="[10,20,50,200]" @on-page-size-change="pageSizeChange"/>
        </Row>
        <br/>
        <option-modal ref="optionModal" :modal-title="modalTitle" :modal-show="modalShow" :modal-type="modalType"
                      :modalWidth="modalWidth" :dataObj="modalData" @cancelOption="cancelOption"
                      @saveOption="saveOption"></option-modal>
    </div>
</template>

<script>
import {
  findRecheckListNew
} from '@/api/pass'
import OptionModal from './components/option-modal'

export default {
  components: { OptionModal },
  data () {
    return {
      modalShow: false,
      modalTitle: '',
      modalType: '',
      modalWidth: 600,
      modalData: {},
      tableColumns: [
        {
          title: '姓名',
          width: 150,
          tooltip: true,
          key: 'name',
          align: 'center'
        },
        {
          title: '联系电话',
          width: 150,
          tooltip: true,
          key: 'tel',
          align: 'center'
        },
        {
          title: '身份证号',
          width: 150,
          tooltip: true,
          key: 'card_no',
          align: 'center'
        },
        {
          title: '复核事项',
          minWidth: 150,
          tooltip: true,
          key: 'rereason',
          align: 'center'
        },
        {
          title: 'openid',
          minWidth: 150,
          tooltip: true,
          key: 'openid',
          align: 'center'
        },
        {
          title: '复核时间',
          minWidth: 150,
          tooltip: true,
          key: 'create_time',
          align: 'center'
        }
      ],
      searchObj: {},
      tableData: [],
      selectData: [],
      tableLoading: false,
      pageObj: {
        pageNo: 1,
        pageSize: 20,
        totalRecord: 0
      }
    }
  },
  methods: {
    initPage () {
      this.pageObj.pageNo = 1
    },
    searchAction () {
      this.initPage()
      this.init()
    },
    saveOption () {
      this.modalShow = false
      this.init()
    },
    cancelOption () {
      this.modalShow = false
    },
    info (data) {
      console.log(data)
      this.modalTitle = '查看详情'
      this.modalType = 'info'
      this.modalWidth = 800
      this.modalData = this.$common.xeUtils.clone(data)
      this.$refs.optionModal.getBindList(data)
      this.modalShow = true
    },
    getPageNo (pageNo) {
      this.pageObj.pageNo = pageNo
      this.init()
    },
    init () {
      let data = {
        pageNo: this.pageObj.pageNo,
        pageSize: this.pageObj.pageSize,
        name: this.$common.xeUtils.trim(this.searchObj.name),
        id_card: this.$common.xeUtils.trim(this.searchObj.card_no),
        tel: this.$common.xeUtils.trim(this.searchObj.tel)
      }
      findRecheckListNew(data).then(ret => {
        let data = ret.data
        if (data.errcode === 200) {
          this.tableData = data.data
          // 数据处理
          this.tableData.forEach(item => {
            item.statistics = '-'
          })
          this.pageObj.totalRecord = data.data.totalRecord
          this.tableLoading = false
        } else {
          this.tableLoading = false
          this.error(data)
        }
      })
    },
    pageSizeChange (e) {
      this.pageObj.pageSize = e
      this.init()
    }
  },
  mounted () {
    this.init()
  }
}
</script>

<style scoped>
    .ivu-form-item{
        margin-bottom: 0;
    }
</style>
